<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/common.css">

    <link rel="stylesheet" href="../../layui/extend/dtree.css">
    <link rel="stylesheet" href="../../layui/extend/font/dtreefont.css">

    <!-- 图标 -->
    <link rel="stylesheet" href="../../static/CaoMei/style.css">
</head>
<body>
<div class="yadmin-body animated fadeIn">


    <form class="layui-form yadmin-search-area input">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label for="equipmentName" class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="equipmentName" autocomplete="off"
                           id="equipmentName" class="layui-input">
                </div>

                <button type="button" lay-submit="" lay-filter="search"
                        class="layui-btn">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </div>
    </form>

    <table class="layui-hide" id="equipment-table"></table>
</div>

<script type="text/html" id="toolbar">

    <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add">
        <i class="layui-icon layui-icon-addition"></i>
        新增
    </button>

</script>

<script type="text/html" id="auth-toolbar">

    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="grant-menu">授权菜单</a>

    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="grant-operator">授权功能</a>

</script>

<script type="text/html" id="column-toolbar">

    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
        <i class="layui-icon layui-icon-edit" title="编辑"></i>
        编辑
    </button>

    <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon layui-icon-delete" title="删除"></i>
        删除
    </button>

</script>

<script src="../../js/jquery.js"></script>
<script src="../../layui/layui.js"></script>
<script src="../../js/common.js"></script>

<script>
    layui.config({
        base: '/layui/extend/'
    }).use(['table', 'element', 'dtree', 'form', 'tablePlug'], function () {
        var table = layui.table;
        var $ = layui.$;
        var dtree = layui.dtree;
        var form = layui.form;
        var tablePlug = layui.tablePlug;

        tablePlug.smartReload.enable(true);

        form.on('submit(search)', function (form) {
            table.reload('equipment-table', {
                where: form.field
            });
            return false;
        });

        table.render({
            elem: '#equipment-table',
            url: '/equipment/selectList',
            cellMinWidth: 80,
            page: true,
            toolbar: '#toolbar',
            smartReloadModel: true,
            response:{
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 0, //成功的状态码，默认：0
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            cols: [
                [
                    {type: 'numbers', title: '序号', width: 60},
                    {field: 'id', title: 'ID', hide: true},
                    {field: 'name', title: '名称', minWidth: 120},
                    {field: 'price', title: '价格', minWidth: 120},
                    {field: 'damage', title: '状态', minWidth: 120},
                    {field: 'comment', title: '详情', minWidth: 120},
                    {field: 'type', title: '类别', minWidth: 120},
                    {field: 'used', title: '是否有人', minWidth: 120},
                    {title: '操作', fixed: 'right', width: 200, align: 'center', toolbar: '#column-toolbar'}
                ]
            ],id:"equipment-table",
            done: function (res,curr,count) {
                $("[data-field='damage']").children().each(function(){
                    if($(this).text()=='0'){
                        $(this).text("损坏")
                    }else if($(this).text()=='1'){
                        $(this).text("正常")
                    }
                }),
                    $("[data-field='used']").children().each(function(){
                        if($(this).text()=='0'){
                            $(this).text("空闲")
                        }else if($(this).text()=='1'){
                            $(this).text("有人")
                        }
                    }),
                    $("[data-field='type']").children().each(function(){

                        if($(this).text()=='0'){
                            $(this).text("休闲")
                        }else if($(this).text()=='1'){
                            $(this).text("益智")
                        }else if($(this).text()=='2'){
                            $(this).text("沉浸式")
                        }else if($(this).text()=='3'){
                            $(this).text("pvp")
                        }else if($(this).text()=='4'){
                            $(this).text("卡牌")
                        }
                    })
            }
        });

        //监听用户名搜索事件

        var active = {
            reload: function(){
                var equipmentName = $('#equipmentName');	//得到搜索框里已输入的数据
                //执行重载
                table.reload('equipment-table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        equipmentName:  equipmentName.val(),
                    }
                });
            }
        };

        $('.layui-inline .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.on('toolbar', function (obj) {
            var event = obj.event;
            if (event === 'add') {
                add();
            }
        });

        table.on('tool', function (obj) {
            var data = obj.data;
            var event = obj.event;
            if (event === 'edit') {
                edit(data.id);
            } else if (event === 'del') {
                layer.confirm("确定删除角色吗?", {icon: 3, title: '提示'},
                    function (index) {// 确定回调

                        $.ajax({
                            url: "/equipment/delete/"+data.id,    //这个是后台的路由地址
                            type: "POST",
                            // data:{"id":data.id},//传给后台的值
                            dataType: "json",
                            async: false,
                            success: function(data){
                                if(data['code']==0){   //从前台取回的状态值
                                    layer.close(index);
                                    //同步更新表格和缓存对应的值
                                    obj.del();
                                    layer.msg("删除成功", {icon: 6});
                                    table.reload('equipment-table');
                                }else{
                                    layer.msg("删除失败", {icon: 5});
                                    table.reload('equipment-table');
                                }
                            }
                        });
                        layer.close(index);
                        obj.del();
                    }, function (index) {//取消回调
                        layer.close(index);
                    }
                );
            }
        });

        function add() {
            layer.open({
                content: "/view/equipment/equipment-add.html",
                title: "新增商品",
                area: ['40%', '85%'],
                type: 2,
                maxmin: true,
                shadeClose: true,
                end: function () {
                    table.reload('equipment-table');
                }
            });
        }

        function edit(id) {
            layer.open({
                content: '/equipment/findById/'+id,
                title: "编辑角色",
                area: ['40%', '85%'],
                type: 2,
                maxmin: true,
                shadeClose: true,
                async: false,
                end: function (data) {
                    table.reload('equipment-table');
                }


            });
        }
    });
</script>

</body>
</html>